<extend name="Public/base"/>

<block name="script">
    <!-- ChartJS 1.0.1 -->
    <script src="__ALTE__/plugins/chartjs/Chart.min.js"></script>

    <!-- daterange picker -->
    <link rel="stylesheet" href="__ALTE__/plugins/daterangepicker/daterangepicker-bs3.css">
    <script src="__ALTE__/plugins/moment/moment.min.js"></script>
    <script src="__ALTE__/plugins/daterangepicker/daterangepicker.js"></script>

    <script>

        $(function () {
            /* ChartJS
             * -------
             * Here we will create a few charts using ChartJS
             */
            var lineChartOptions = {
                //Boolean - If we should show the scale at all
                showScale: true,
                //Boolean - Whether grid lines are shown across the chart
                scaleShowGridLines: true,
                //String - Colour of the grid lines
                scaleGridLineColor: "rgba(0,0,0,.05)",
                //Number - Width of the grid lines
                scaleGridLineWidth: 1,
                //Boolean - Whether to show horizontal lines (except X axis)
                scaleShowHorizontalLines: true,
                //Boolean - Whether to show vertical lines (except Y axis)
                scaleShowVerticalLines: true,
                //Boolean - Whether the line is curved between points
                bezierCurve: true,
                //Number - Tension of the bezier curve between points
                bezierCurveTension: 0.3,
                //Boolean - Whether to show a dot for each point
                pointDot: true,
                //Number - Radius of each point dot in pixels
                pointDotRadius: 4,
                //Number - Pixel width of point dot stroke
                pointDotStrokeWidth: 1,
                //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
                pointHitDetectionRadius: 20,
                //Boolean - Whether to show a stroke for datasets
                datasetStroke: true,
                //Number - Pixel width of dataset stroke
                datasetStrokeWidth: 2,
                //Boolean - Whether to fill the dataset with a color
                datasetFill: false,
                //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                maintainAspectRatio: true,
                //Boolean - whether to make the chart responsive to window resizing
                responsive: true
            };
            //-------------
            //- LINE CHART -
            //--------------
            var lineChartData;
            var setLineChartData=function(data){
                lineChartData = {
                    all:{
                        labels: data.labels,
                        datasets: [
                            {
                                fillColor: "#BBB",
                                strokeColor: "#BBB",
                                pointColor: "#BBB",
                                pointStrokeColor : "#9393F7",
                                data: data.datas.user_num
                            },
                            {
                                fillColor: "#3b8bba",
                                strokeColor: "#5696BC",
                                pointColor: "#3b8bba",
                                pointStrokeColor : "yellow",
                                data: data.datas.total_fee
                            }
                        ]
                    },
                    only_user:{
                        labels: data.labels,
                        datasets: [
                            {
                                fillColor: "#BBB",
                                strokeColor: "#BBB",
                                pointColor: "#BBB",
                                pointStrokeColor : "#9393F7",
                                data: data.datas.user_num
                            }
                        ]
                    },
                    only_fee:{
                        labels: data.labels,
                        datasets: [
                            {
                                fillColor: "#3b8bba",
                                strokeColor: "#5696BC",
                                pointColor: "#3b8bba",
                                pointStrokeColor : "yellow",
                                data: data.datas.total_fee
                            }
                        ]
                    }
                };
            }
            var type='only_fee';
            var refreshLineChart=function(){
                $("#lineChart").remove();
                $('[data-role="add-line-chart"]').append('<canvas id="lineChart" style="height:450px"></canvas>');
                var lineChartCanvas =$("#lineChart") .get(0).getContext("2d");
                var lineChart = new Chart(lineChartCanvas);
                lineChart.Line(lineChartData[type], lineChartOptions);
            }

            var consumptionList=eval('('+'{$consumptionList}'+')');
            setLineChartData(consumptionList);
            refreshLineChart();

            var startDate="{$options.startDate}",
                    endDate="{$options.endDate}";
            $('#reservation').daterangepicker({
                locale:{
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '开始',
                    toLabel: '结束',
                    daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
                },
                format: 'YYYY-MM-DD',
                startDate:startDate,
                endDate:endDate,
                maxDate:endDate
            });

            $('#reservation').on('apply.daterangepicker',function(ev, picker) {
                $.post("__SELF__", {startDate:picker.startDate.format('YYYY-MM-DD'),endDate:picker.endDate.format('YYYY-MM-DD')}, function (msg) {
                    if(msg.status==1){
                        setLineChartData(msg);
                        refreshLineChart();
                    }else{
                        handleAjax(msg);
                    }
                });
            });
            $('[name="type_show"]').click(function(){
                type=$(this).val();
                refreshLineChart();
            });
        });
    </script>
</block>
<block name="body">
    <include file="_top_nav"/>
    <!-- /.col (LEFT) -->
    <div class="col-md-12 consumption">
        <!-- LINE CHART -->
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title"><a title="消费人民币">消费用户统计</a>(必须安装官方Pingxx或Recharge模块才能进行有效的消费统计)</h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <!--<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>-->
                </div>
            </div>
            <div class="box-body">
                <button class="btn btn-box-tool pull-left" id="reservation" style="line-height: 40px;font-size: 18px;">
                    <i class="fa fa-calendar"></i>时段选择
                </button>
                <div class="checkbox_block pull-left">
                    <label><input type="radio" name="type_show" value="all"/>全部<squre class="total_fee"></squre><squre class="user_num"></squre></label>
                    <label><input type="radio" name="type_show" value="only_fee" checked/>只显示金额<squre class="total_fee"></squre></label>
                    <label><input type="radio" name="type_show" value="only_user"/>只显示用户<squre class="user_num"></squre></label>
                </div>
                <div class="chart" data-role="add-line-chart" style="height: 500px;">
                    <!--图标插入位置-->
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col (RIGHT) -->

    <!--<div class="with-padding-lg" style="position: relative">
        <button class="btn  pull-right" data-toggle="modal" data-target="#settingCount"
                style="position: absolute;right: 15px;z-index: 999">
            <i class="icon-cog"></i>
            设置
        </button>
    </div>-->
</block>
<block name="modal">
    <div class="modal fade" id="settingCount">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">{:L('_CLOSE_')}</span></button>
                    <h4 class="modal-title">{:L('_STATISTICS_SET_')}</h4>
                </div>
                <div class="modal-body">
                    <div class="with-padding">
                        <label>{:L('_DISPLAY_DAYS_DEFAULT_')} </label><input class="form-control" name="count_day"
                                                                             value="{$count.count_day}">

                    </div>


                </div>
                <div class="modal-footer">
                    <button class="btn " data-role="saveCountSetting">
                        <i class="icon-ok"></i> {:L('_SAVE_')}
                    </button>
                    <button class="btn " data-dismiss="modal">
                        <i class="icon-remove"></i> {:L('_CANCEL_')}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('[data-role=saveCountSetting]').click(function () {
            $.post("__SELF__", {count_day: $('[name=count_day]').val()}, function (msg) {
                handleAjax(msg);
            });
        })
    </script>
</block>